<template>
  <view class="form-page">
    <cu-custom bgColor="bg-blue" :isBack="true">
      <block slot="content" v-if="colsV2Data && colsV2Data.service_view_name">{{ colsV2Data.service_view_name }}</block>
    </cu-custom>
    <u-tabs :list="tabList" :is-scroll="true" :current="curTab" @change="changeTab"
      v-if="type === 'detail' && childService && childService.length > 0"></u-tabs>
    <view class="main-table" v-show="type !== 'detail' ||( type === 'detail' && curTab==0)">
      <bxform ref="bxForm" :service="serviceName" :addType="addType" :pageType="type" :BxformType="type"
        :fields="fields" :moreConfig="colsV2Data && colsV2Data.moreConfig ? colsV2Data.moreConfig : null"></bxform>
    </view>

    <view class="child-service" v-if="curTab>0">
      <view class="child-service-item" v-for="(item,index) in childV2List" v-show="index===curTab-1" :key="index">
        <bx-child-form :mainV2Data="item" :childList="item.child_service" v-if="item&&index===curTab-1"></bx-child-form>
      </view>
    </view>
    <view class="button-box" v-if="!disabled&&colsV2Data && isArray(fields) && fields.length > 0">
      <view class="button" v-if="type === 'detail'&&!disabled"><button class="cu-btn bg-blue"
          @click="toUpdatePages">编辑</button>
      </view>
      <view v-for="(item, index) in buttons" :key="index" class="button">
        <button v-if="item.display !== false" @click="onButton(item)"
          class="cu-btn bg-blue">{{ item.button_name }}</button>
      </view>
    </view>
  </view>
</template>

<script>
  import bxform from '@/components/bx-form/bx-form.vue';
  export default {
    components: {
      bxform
    },
    props: {},
    data() {
      return {
        curTab: 0,
        fields: [],
        colsV2Data: null,
        childV2List: [],
        type: '',
        serviceName: '',
        condition: [],
        defaultCondition: [],
        params: {},
        addType: '',
        fieldsCond: [], //treeSelector类型字段的条件
        disabled: false,
        detail: {}
      };
    },
    computed: {
      formName() {
        if (this?.colsV2Data?.service_view_name) {
          return this.colsV2Data.service_view_name.replace('查询', '详情')
        }
      },
      curChildTab() {
        if (this.curTab > 0) {
          return this.curTab - 1
        } else {
          return -1
        }
      },
      tabList() {
        let arr = []
        if (this.colsV2Data?.service_view_name && this.colsV2Data?.service_name) {
          let first = {
            service_name: this.colsV2Data?.service_name,
            name: this.colsV2Data.service_view_name.replace('查询', '详情'),
            type: "main"
          }
          arr.push(first)
        }
        if (Array.isArray(this.childService) && this.childService.length > 0) {
          this.childService.forEach(item => {
            item.name = item.foreign_key?.section_name || item.service_view_name
            arr.push(item)
          })
        }

        if (this.type === 'detail') {
          return arr
        }

      },
      childService() {
        if (this.colsV2Data && Array.isArray(this.colsV2Data.child_service)) {
          return this.colsV2Data.child_service;
        }
      },
      buttons: function() {
        let buttons = [];
        if (this.colsV2Data && this.colsV2Data._buttonInfo) {
          buttons = this.colsV2Data._buttonInfo;
        } else if (this.colsV2Data && this.colsV2Data._formButtons) {
          buttons = this.colsV2Data._formButtons;
        }
        buttons = buttons.filter(item => item.button_name !== '重置');
        let data = {};
        this.fields.forEach(item => {
          data[item['column']] = item['value'];
        });
        let fieldModel = data;
        buttons.forEach(btn => {
          if (btn.disp_exps) {
            btn['display'] = eval(btn.disp_exps);
          }
          if (btn.operate_params) {
            let fieldData = btn.operate_params['data'];
            if (fieldData && Array.isArray(fieldData) && fieldData.length > 0) {
              fieldData = fieldData[0];
              let newData = {};
              Object.keys(fieldData).forEach(data_item => {
                let item = fieldData[data_item];
                if (item.value_type && item.value_type === 'rowData') {
                  newData[data_item] = fieldModel[item.value_key];
                }
              });
              btn['requestData'] = newData;
              btn['requestCondition'] = this.condition;
            }
          }
        });
        return buttons;
      }
    },
    created() {
      const destApp = this.$route ? this.$route.query.destApp : '';
      if (destApp) {
        uni.setStorageSync('activeApp', destApp);
      }
    },

    onLoad(option) {
      const destApp = option.destApp;
      if (option.disabled) {
        this.disabled = true
      }
      if (destApp) {
        uni.setStorageSync('activeApp', destApp);
      }
      if (option.fieldsCond) {
        this.fieldsCond = JSON.parse(decodeURIComponent(option.fieldsCond));
      }
      if (option.params) {
        this.params = JSON.parse(decodeURIComponent(option.params));
      }
      if (option.addType) {
        this.addType = option.addType;
      }
      if (option.cond) {
        this.defaultCondition = JSON.parse(option.cond);
      }
      if (option.hasOwnProperty('params')) {
        this.serviceName = this.params.serviceName;
        this.type = this.params.type;
        this.condition = this.params.condition;
        this.defaultVal = this.params.defaultVal;
        this.getFieldsV2();
      } else if (option.serviceName && option.type) {
        this.serviceName = option.serviceName;
        this.type = option.type;
        this.getFieldsV2();
      } else {
        uni.showToast({
          title: '加载错误',
          icon: 'none'
        });
      }
    },
    methods: {
      showChildTable(main, child) {
        if (child?.foreign_key?.show_child_list_expr) {
          let show_child_list_expr = child?.foreign_key?.show_child_list_expr.replace('{{', '').replace('}}', '')
          if (main?.mainData) {
            let mainData = main.mainData;
            let res = eval(show_child_list_expr)
            return res
          }
        }
        return true
      },
      async getChildV2(e, eMainData) {
        console.log(e)
        debugger
        let app = uni.getStorageSync('activeApp');
        let type = 'detail';
        if (e.foreign_key?.view_model === 'list') {
          type = 'detaillist'
        }
        let colVs = await this.getServiceV2(e.service_name, 'detail', type, e.srv_app);
        if(colVs){
          colVs = this.deepClone(colVs)
        }
        if (colVs.more_config && typeof colVs.more_config === 'string') {
          try {
            colVs.moreConfig = JSON.parse(colVs.more_config)
          } catch (e) {
            console.log(e)
            //TODO handle the exception
          }
        }
        let foreign_key = e.foreign_key;

        if (foreign_key?.relation_type === '服务') {
          if (foreign_key?.ref_app && foreign_key?.ref_service && foreign_key?.ref_service_column) {
            let condition = [{
              colName: foreign_key?.ref_service_column,
              ruleType: "eq"
            }]
            if (foreign_key.refed_service_column && eMainData[foreign_key.refed_service_column]) {
              condition[0].value = eMainData[foreign_key.refed_service_column]
            }
            colVs.childCondition = condition;
            if (foreign_key?.view_model === 'detail') {
              let defaultVal = await this.getDefaultVal(e.service_name, e.srv_app, condition);
              colVs.mainData = defaultVal || {}
              if (Array.isArray(colVs._fieldInfo)) {
                colVs.fields = this.setFieldsDefaultVal(colVs._fieldInfo, defaultVal || {});
              }
            }
            colVs.view_model = foreign_key?.view_model
          }
        }
        if (Array.isArray(colVs.child_service) && colVs.child_service.length > 0) {
          colVs.child_service.forEach(async (item, index) => {
            let res = await this.getChildV2(item, colVs.mainData)
            item.colV2 = res;
            if (item.foreign_key?.foreign_key_type === '主子表') {
              if (item.foreign_key?.referenced_column_name) {
                let condition = [{
                  colName: item.foreign_key?.column_name,
                  ruleType: "eq",
                  value: colVs.mainData[item.foreign_key.referenced_column_name]
                }]
                item.childCondition = condition
              }
              // else if (item.foreign_key?.referenced_column_name) {
              //   let condition = [{
              //     colName: item.foreign_key?.referenced_column_name,
              //     ruleType: "eq",
              //     value: colVs.mainData[item.foreign_key.referenced_column_name]
              //   }]
              //   item.childCondition = condition
              // }
            } else if (item?.foreign_key?.relation_type === '服务') {
              // if (item?.foreign_key?.ref_app && item?.foreign_key?.ref_service && item?.foreign_key?.ref_service_column && colVs.mainData &&
              //   colVs.mainData[item?.foreign_key.refed_service_column]) {
              //   let condition = [{
              //     colName: item?.foreign_key?.ref_service_column,
              //     ruleType: "eq",
              //     value: colVs.mainData[item?.foreign_key.refed_service_column]
              //   }]
              //   colVs.childCondition = condition;
              //   colVs.view_model = item?.foreign_key?.view_model
              // }
            }
            this.$set(colVs.child_service, index, item)
          })
        }
        return colVs
      },
      changeTab(index) {
        this.curTab = index
        if (index > 0) {
          if (this.childV2List.length === 0 && Array.isArray(this.childService) && this.childService.length > 0) {
            this.childV2List = new Array(this.childService.length)
          }
          let mainData = this.detail;
          this.getChildV2(this.childService[index - 1], mainData).then(res => {
            this.$set(this.childV2List, index - 1, res)
          })
        }
      },
      toChildServiceList(e) {
        let data = this.deepClone(e);
        let formData = this.params.defaultVal;
        let condition = [{
          colName: e.foreign_key.column_name,
          ruleType: 'eq',
          value: formData[e.foreign_key.referenced_column_name]
        }];
        if (e.foreign_key && e.foreign_key.more_config && typeof e.foreign_key.more_config === 'string') {
          try {
            e.foreign_key.more_config = JSON.parse(e.foreign_key.more_config);
          } catch (e) {
            //TODO handle the exception

          }
        }
        if (e.foreign_key && e.foreign_key.more_config && formData[e.foreign_key.referenced_column_name]) {
          let moreConfig = e.foreign_key.more_config;
          if (e.foreign_key.more_config.targetType) {
            let targetType = e.foreign_key.more_config.targetType;
            if (targetType === 'list') {
              uni.navigateTo({
                url: '/pages/public/list/list?pageType=list&serviceName=' + e.service_name + '&cond=' + JSON
                  .stringify(condition)
              });
            } else if (targetType === 'detail') {
              if (e.childData && e.childData.data && e.childData.data.length > 0) {
                let params = {
                  type: 'update',
                  formDisabled: true,
                  condition: [{
                    colName: 'id',
                    ruleType: 'in',
                    value: e.childData.data[0].id
                  }],
                  serviceName: e.service_name
                  // "defaultVal": row
                };
                uni.navigateTo({
                  url: '/pages/public/formPage/formPage?params=' + JSON.stringify(params)
                });
              } else {
                uni.showModal({
                  title: '提示',
                  content: '暂无数据，是否添加数据',
                  success(res) {
                    if (res.confirm) {
                      let params = {
                        type: 'add',
                        serviceName: e.service_name.replace('_select', '_add')
                        // defaultVal:formData
                      };
                      // referenced_column_name //被引用的字段
                      // column //子表字段
                      console.log(e);
                      if (e.foreign_key && e.foreign_key.referenced_column_name && e.foreign_key.column_name) {
                        params.defaultCondition = [{
                          colName: e.foreign_key.referenced_column_name,
                          ruleType: 'eq',
                          value: formData[e.foreign_key.column_name]
                        }];
                      }
                      uni.navigateTo({
                        url: '/pages/public/formPage/formPage?params=' + JSON.stringify(params)
                      });
                    }
                  }
                });
              }
            }
          }
          if (moreConfig.app_list_column && typeof moreConfig.app_list_column == 'object' && moreConfig.app_list_column
            .title) {
            uni.navigateTo({
              url: '/pages/public/list/list?pageType=list&serviceName=' +
                e.service_name +
                '&cond=' +
                JSON.stringify(condition) +
                '&viewTemp=' +
                JSON.stringify(moreConfig.app_list_column)
            });
          }
        } else {
          uni.navigateTo({
            url: '/pages/public/list/list?pageType=list&serviceName=' + e.service_name + '&cond=' + JSON.stringify(
              condition)
          });
        }
      },
      toUpdatePages() {
        let params = {
          type: 'update',
          condition: this.params.condition,
          serviceName: this.params.serviceName.replace('_select', '_update'),
          defaultVal: this.params.defaultVal
        };
        uni.navigateTo({
          url: '/pages/public/formPage/formPage?params=' + JSON.stringify(params)
        });
      },
      async getDefaultVal(serviceName, app, condition, type) {
        if (this.type === 'detail' || this.type === 'update') {
          app = app || uni.getStorageSync('activeApp');
          serviceName = serviceName || this.params.serviceName
          condition = condition || this.params.condition || []
          let url = this.getServiceUrl(app, serviceName, 'select');
          let req = {
            serviceName: serviceName,
            colNames: ['*'],
            condition: condition,
            page: {
              pageNo: 1,
              rownumber: 10
            }
          };
          if (type === 'list') {
            req.page.rownumber = 99
          }
          let res = await this.$http.post(url, req);
          if (res.data.state === 'SUCCESS') {
            if (Array.isArray(res.data.data) && res.data.data.length > 0) {
              if (type === 'list') {
                return res.data.data;
              } else {
                return res.data.data[0];
              }
            }
          }
        }
      },
      getFieldsV2: async function(serviceName, type) {
        let app = uni.getStorageSync('activeApp');
        let colVs = await this.getServiceV2(this.serviceName, this.type, this.type, app);
        let defaultVal = null;
        colVs = this.deepClone(colVs);
        if (colVs.more_config && typeof colVs.more_config === 'string') {
          try {
            colVs.moreConfig = JSON.parse(colVs.more_config)
          } catch (e) {
            //TODO handle the exception
            console.log(e)
          }
        }
        this.colsV2Data = colVs;
        if (colVs.service_view_name) {
          uni.setNavigationBarTitle({
            title: colVs.service_view_name
          });
        }
        switch (this.type) {
          case 'update':
          case 'detail':
            defaultVal = await this.getDefaultVal();
            this.detail = defaultVal
            this.fields = this.setFieldsDefaultVal(colVs._fieldInfo, defaultVal ? defaultVal : this.params
              .defaultVal);
            break;
          case 'add':
            this.fields = colVs._fieldInfo.map(field => {
              if (this.defaultCondition && Array.isArray(this.defaultCondition) && colVs._fieldInfo && Array
                .isArray(colVs._fieldInfo)) {
                this.defaultCondition.forEach(cond => {
                  colVs._fieldInfo.forEach(field => {
                    if (cond.colName === field.column) {
                      field['value'] = cond['value'];
                      // field['disabled'] = true;
                    }
                  });
                });
              }
              if (Array.isArray(this.fieldsCond) && this.fieldsCond.length > 0) {
                this.fieldsCond.forEach(item => {
                  if (item.column === field.column && field.option_list_v2 && Array.isArray(field
                      .option_list_v2.conditions) && Array.isArray(item.condition)) {
                    field.option_list_v2.conditions = field.option_list_v2.conditions.concat(item.condition);
                  }
                });
              }
              return field;
            });
            break;
          default:
            break;
        }
      },
      async onButton(e) {
        let req = this.$refs.bxForm.getFieldModel();
        for (let key in req) {
          if (!req[key]) {
            delete req[key];
          }
        }
        switch (e.button_type) {
          case 'edit':
            if (e.page_type === '详情' && this.type === 'detail') {
              this.type = 'update';
              await this.getFieldsV2();
            } else {
              if (req) {
                req = [{
                  serviceName: e.service_name,
                  data: [req],
                  condition: this.condition
                }];
                let app = uni.getStorageSync('activeApp');
                let url = this.getServiceUrl(app, e.service_name, 'add');
                let res = await this.onRequest('update', e.service_name, req);
                console.log('res:' + e.service_name, res);
                if (res.data.state === 'SUCCESS') {
                  let resData = this.getResData(res.data.response);
                  console.log('resData', resData);
                  this.type = 'detail';
                  await this.getFieldsV2();
                }
              }
            }
            break;
          case 'submit':
            if (req) {
              req = [{
                serviceName: e.service_name,
                data: [req]
              }];
              let app = uni.getStorageSync('activeApp');
              let url = this.getServiceUrl(app, e.service_name, 'add');
              console.log(url, e);
              let res = await this.$http.post(url, req);
              console.log(url, res.data);
              if (res.data.state === 'SUCCESS') {
                uni.showModal({
                  title: '提示',
                  content: '添加成功',
                  showCancel: false,
                  success(res) {
                    if (res.confirm) {
                      uni.navigateBack();
                    }
                  }
                });
              }
            }
            break;
          case 'reset':
            this.$refs.bxForm.onReset().then(res => {
              debugger;
              if (res) {
                uni.showToast({
                  title: '已重置'
                });
              } else {
                uni.showToast({
                  title: '无效操作'
                });
              }
            });
            break;
          case 'customize':
            if (e.application && e.operate_service) {
              const url = this.getServiceUrl(e.application, e.operate_service, 'operate');
              const req = [{
                data: [e.requestData],
                serviceName: e.operate_service,
                srvApp: e.application
              }];
              let res = await this.$http.post(url, req);
              if (res.data.state === 'SUCCESS') {
                uni.showModal({
                  title: '提示',
                  content: e.tip_msg ? e.tip_msg : res.data.resultMessage,
                  showCancel: false,
                  success(res) {
                    if (res.confirm) {
                      uni.navigateBack();
                    }
                  }
                });
              } else {
                uni.showToast({
                  title: res.data.resultMessage,
                  mask: false,
                  icon: 'none'
                });
              }
            }
            break;
          default:
            uni.showToast({
              title: e.button_name
            });
            break;
        }
      }
    }
  };
</script>

<style lang="scss">
  .form-page {
    min-height: 100vh;
    height: auto;

    // padding: 10px;
    .normal-title {
      margin-bottom: 20rpx;
      margin-left: 10rpx;
      padding: 0;
      display: inline-block;
      position: relative;
      width: 100%;
      text-indent: 30rpx;
      font-weight: bold;
      font-size: 32rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10%;
        height: 80%;
        width: 5px;
        background-color: #0081ff;
        border-radius: 5rpx;
      }
    }

    .main-table {
      margin-top: 5px;

      .form-name {
        border-bottom: 1px solid #f1f1f1;
      }

      .normal-title {
        margin-left: 20rpx;
      }
    }

    .child-service-box {
      margin: 20rpx;
      padding: 20rpx;
      display: flex;
      flex-wrap: wrap;
      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

      .child-service-item {
        min-height: 100rpx;
        width: calc(33% - 6rpx);
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translate(2px, 2px);
        background-color: #409eff;
        color: #fff;
        transition: 0.2s transform ease-in-out;
        border-radius: 10rpx;
        margin-right: 10rpx;

        &:nth-child(3n + 1) {
          margin-right: 0;
        }

        &:active {
          transform: translate(2px, 2px);
          color: #409eff;
          background: #ecf5ff;
          box-shadow: 0px 0px 4px #ecf5ff, 0 0 6px #b3d8ff;
        }

        .child-service-title {
          // color: #0081ff;
          letter-spacing: 2px;
          font-weight: bold;
        }


      }

    }
  }

  .child-child-service {
    margin: 10px 0;
    background-color: #fff;

    .section-name {
      padding: 10px;
    }
  }

  .button-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 200upx;
    background-color: #fff;
    flex-wrap: wrap;

    .button {
      width: 40%;

      .cu-btn {
        background-color: #14c4bd;
        width: 100%;
      }
    }
  }
</style>
